<template>
  <div id="app1">
    <el-container class="container">
      <!-- 左侧菜单 -->
      <el-aside class="aside" :width="realWidth">
        <Asides :isCollapse="isCollapse"/>
      </el-aside>
      <el-container>
        <el-header class="header">
          <i :class="classFold" @click="reverseFold"></i>
          <span>北京燕京啤酒集团有限公司</span>
          <!-- 个人信息 -->
          <el-dropdown trigger="click" class='user-info'>
            <span class="el-dropdown-link">
              超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item >个人信息</el-dropdown-item>
              <el-dropdown-item >修改密码</el-dropdown-item>
              <el-dropdown-item><p @click="exit">退出</p></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main class="main">
          主体内容
          <router-view/>
        </el-main>
        <el-footer class="footer">
          <div class="foot-span">版权所有 ©燕京啤酒 2020-2035 保留一切权利</div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="less">
</style>
<script>
import Asides from '@/views/layout/asides'

export default {
  name: 'main-layout',
  components: { Asides },
  data () {
    return {
      classFold: 'el-icon-s-fold fold-img',
      isCollapse: false,
      realWidth: '200px'
    }
  },
  methods: {
    exit: function () {
      console.log(11111111)
      this.$router.push('/login')
    },
    reverseFold: function () {
      if (this.classFold === 'el-icon-s-fold fold-img') {
        this.classFold = 'el-icon-s-unfold fold-img'
      } else {
        this.classFold = 'el-icon-s-fold fold-img'
      }
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.realWidth = '65px'
      } else {
        this.realWidth = '200px'
      }
    }
  }
}
</script>

<style scoped>
.container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.aside {
  overflow-x:hidden;
  overflow-y:hidden;
  background-color:#002033;
}
.user-info {
  float: right;
  margin-right: 2px;
  margin-top: 20px;
}
.fold-img {
  margin-top: 20px;
}
.header {
  /*position: relative;*/
  border: 1px solid #cccccc;
}
.main {
  min-height: calc(100vh - 90px);
  background-color: ghostwhite;
}
.footer {
  text-align: center;
  font-size: 8px;
  /* background-color: papayawhip; */
}
.foot-span {
  bottom: -8px;
  height: 20px;
  position: relative;
}
</style>
